<div class="layui-card">
    <div class="layui-card-header">
        <span class="layui-breadcrumb pull-right">
            <a>首页</a>
            <a><cite>登录量走势图</cite></a>
        </span>
    </div>
    <div class="layui-card-body">
        <div class="layui-form toolbar">
            搜索:
            <div class="layui-inline">
                <input type="text" class="layui-input time" id="start_time_login">
            </div>
            间隔时间:
            <select id="interval_hour_login">
                <option value="1">1小时</option>
                <option value="3">3小时</option>
                <option value="6">6小时</option>
                <option value="8">8小时</option>
            </select>
            天数:
            <select id="consecutive_day_login">
                <option value="1">1天</option>
                <option value="2">2天</option>
                <option value="3">3天</option>
                <option value="4">4天</option>
                <option value="5">5天</option>
                <option value="6">6天</option>
                <option value="7">7天</option>
            </select>
            <button id="loginCount-btn-search" class="layui-btn icon-btn"><i class="layui-icon">&#xe615;</i>搜索</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
        <!--数据柱状图-->
        <div id="login-column" style="min-width:600px;height:400px"></div>
    </div>
</div>
<script>

    var returnData = [];
    layui.use(['config', 'laydate', 'util', 'admin'], function () {
        var laydate = layui.laydate;
        var config = layui.config;
        var util = layui.util;
        var admin = layui.admin;
        //日期时间选择器
        laydate.render({
            elem: '#start_time_login' //指定元素
            , type: 'date'
            , format: 'yyyy-MM-dd'
            , max: 1
        });
        // 搜索按钮点击事件
        $('#loginCount-btn-search').click(function () {
            var loginData = [];
            var json = [];
            json.push({ start_time_login: $('#start_time_login').val() });
            json.push({ interval_hour_login: $('#interval_hour_login').val() });
            json.push({ consecutive_day_login: $('#consecutive_day_login').val() });
            //发送请求
            admin.req('api-select/loginCount/'
                , { start_time_login: $('#start_time_login').val(), interval_hour_login: $('#interval_hour_login').val(), consecutive_day_login: $('#consecutive_day_login').val() }
                , function (data) {
                    for (var i = 0; i < data.length; i++) {
                        loginData[i] = new Array(data[i].millisecond, data[i].count);
                    }
                }, 'GET');
            //刷新走势图
            Highcharts.chart('login-column', {
                chart: {
                    zoomType: 'x'
                },
                title: {
                    text: '登录量走势图'
                },
                subtitle: {
                    text: document.ontouchstart === undefined ?
                        '鼠标拖动可以进行缩放' : '手势操作进行缩放'
                },
                xAxis: {
                    type: 'datetime',
                    dateTimeLabelFormats: {
                        millisecond: '%H:%M:%S.%L',
                        second: '%H:%M:%S',
                        minute: '%H:%M',
                        hour: '%H:%M',
                        day: '%m-%d',
                        week: '%m-%d',
                        month: '%Y-%m',
                        year: '%Y'
                    }
                },
                tooltip: {
                    dateTimeLabelFormats: {
                        millisecond: '%H:%M:%S.%L',
                        second: '%H:%M:%S',
                        minute: '%H:%M',
                        hour: '%H:%M',
                        day: '%Y-%m-%d',
                        week: '%m-%d',
                        month: '%Y-%m',
                        year: '%Y'
                    }
                },
                yAxis: {
                    min: 0,
                    allowDecimals: false,
                    title: {
                        text: '登录量'
                    }
                },
                legend: {
                    enabled: false
                },
                plotOptions: {
                    area: {
                        dataLabels: {
                            // 开启数据标签
                            enabled: true
                        },
                        fillColor: {
                            linearGradient: {
                                x1: 0,
                                y1: 0,
                                x2: 0,
                                y2: 1
                            },
                            stops: [
                                [0, Highcharts.getOptions().colors[0]],
                                [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
                            ]
                        },
                        marker: {
                            radius: 2
                        },
                        lineWidth: 1,
                        states: {
                            hover: {
                                lineWidth: 1
                            }
                        },
                        threshold: null
                    }
                },
                series: [{
                    type: 'area',
                    name: '登录量',
                    data: loginData
                }]
            });
        });

    });

</script>